<!DOCTYPE html>
<html>
<head>
<title>Relationship - Wide and Deep</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>

	<div class="container">
		<h3>Relationships Network</h3>
		<div id="min-carousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#min-carousel" data-slide-to="0" class="active"></li>
				<li data-target="#min-carousel" data-slide-to="1"></li>
				<li data-target="#min-carousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<a><img alt="" src="img/1.jpg" width="1200" height="480"> </a>
					<div class="carousel-caption">
						<p>1</p>
					</div>
				</div>
				<div class="item">
					<a><img alt="" src="img/2.jpg" width="1200" height="480"> </a>
					<div class="carousel-caption">
						<p>1</p>
					</div>
				</div>
				<div class="item">
					<a><img alt="" src="img/3.jpg" width="1200" height="480"> </a>
					<div class="carousel-caption">
						<p>1</p>
					</div>
				</div>
			</div>
			<a class="carousel-control left" href="#min-carousel" data-slide="prev">&lsaquo;</a> 
			<a class="carousel-control right" href="#min-carousel" data-slide="next">&rsaquo;</a>
		</div>
		<a class="btn" href="map.php">View your network &raquo;</a>
	</div>

	
	<script src="http://code.jquery.com/jquery.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script>
      $(document).ready(function(){
        $('.carousel').carousel({
          interval: 3000
        });
      });
    </script>

</body>
</html>
